<template>
    <dd-scrollbar @visible="setVisible" :longButton="long" />
    <dd-button @click="changeLong">{{long}}</dd-button>
    visible: {{visible}}
</template>

<script setup lang="ts">
import { ref } from "vue";

const visible = ref()
const long = ref("40em")

function setVisible(visivle_: boolean) {
    visible.value = visivle_
}

function changeLong() {
    long.value = long.value === "40em" ? "100%" : "40em"
    console.log(long.value);
}
</script>

<style>
.lorem {
    width: 10em;
    height: 10em;
    overflow: hidden;
    margin-bottom: 1em;
}

.lorem div {
    width: 20em;
}
</style>
